<template>
  <div class="app-container home">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic :value="1" title="平均温度" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic :value="1" title="设备数量" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic :value="1" title="活动告警" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic :value="1" title="授权用户" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <div>设备状态监控</div>
              <div>
                <el-radio-group v-model="radio1">
                  <el-radio-button label="全部" value="New York" />
                  <el-radio-button label="在线" value="Washington" />
                  <el-radio-button label="告警" value="Los Angeles" />
                </el-radio-group>
              </div>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8" class="card-item">
              <el-card shadow="hover">
                <div class="dev-title">
                  <div>
                    <div>智能冷柜 #002</div>
                    <div class="msg">备用冷柜</div>
                  </div>
                  <el-button type="warning">Warning</el-button>
                </div>
                <div class="temperature">18℃</div>
                <div class="temperature2">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>蒸发器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>冷凝器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <el-button type="primary" @click="goControl()" style="width: 100%" plain>实时控制</el-button>
              </el-card>
            </el-col>
            <el-col :span="8" class="card-item">
              <el-card shadow="hover">
                <div class="dev-title">
                  <div>
                    <div>智能冷柜 #002</div>
                    <div class="msg">备用冷柜</div>
                  </div>
                  <el-button type="warning">Warning</el-button>
                </div>
                <div class="temperature">18℃</div>
                <div class="temperature2">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>蒸发器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>冷凝器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <el-button type="primary" style="width: 100%" plain>实时控制</el-button>
              </el-card>
            </el-col>
            <el-col :span="8" class="card-item">
              <el-card shadow="hover">
                <div class="dev-title">
                  <div>
                    <div>智能冷柜 #002</div>
                    <div class="msg">备用冷柜</div>
                  </div>
                  <el-button type="warning">Warning</el-button>
                </div>
                <div class="temperature">18℃</div>
                <div class="temperature2">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>蒸发器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>冷凝器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <el-button type="primary" style="width: 100%" plain>实时控制</el-button>
              </el-card>
            </el-col>
            <el-col :span="8" class="card-item">
              <el-card shadow="hover">
                <div class="dev-title">
                  <div>
                    <div>智能冷柜 #002</div>
                    <div class="msg">备用冷柜</div>
                  </div>
                  <el-button type="warning">Warning</el-button>
                </div>
                <div class="temperature">18℃</div>
                <div class="temperature2">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>蒸发器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="temperature-item">
                        <div>冷凝器温度</div>
                        <div>-21.2°C</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <el-button type="primary" style="width: 100%" plain>实时控制</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <div>温度趋势（24小时）</div>
              <div>
                <el-radio-group v-model="radio1">
                  <el-radio-button label="24小时" value="New York" />
                  <el-radio-button label="7天" value="Washington" />
                  <el-radio-button label="30天" value="Los Angeles" />
                </el-radio-group>
              </div>
            </div>
          </template>
        </el-card>

        <el-card style="margin-top: 20px">
          <template #header>
            <div class="card-header">
              <div>设备状态分布</div>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const radio1 = ref('New York');
const goControl = () => {
  router.push({ path: '/control' });
};
</script>

<style lang="scss" scoped>
::v-deep .el-statistic__title {
  text-align: center;
  font-size: 18px;
  color: #666;
  text-align: center;
}
::v-deep .el-statistic__content {
  text-align: center;
}
::v-deep .el-statistic__head {
  text-align: center;
}
::v-deep .el-statistic__number {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #02a7f0;
}
.card-item {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dev-title {
  display: flex;
  justify-content: space-between;
  .msg {
    font-size: 14px;
    color: #666;
  }
}
.temperature {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #02a7f0;
  margin: 20px 0;
}
.temperature2 {
  margin-bottom: 20px;
  .temperature-item {
    font-size: 14px;
  }
}
</style>
